<template>
  <div id="treeBox" :style="{ height: height, width: width }">
    <el-scrollbar class="page-component__scroll" style="height: 100%">
      <el-tree
        :default-expanded-keys="[xzcode]"
        :current-node-key="xzcode"
        :node-key="nodeKey"
        :ref="refName"
        highlight-current
        :props="defaultProps"
        :load="loadNode"
        :show-checkbox="checkbox"
        :check-strictly="checkStrictly"
        @node-click="nodeClick"
        @check-change="handleCheckChange"
        :default-checked-keys="value"
        lazy
      ></el-tree>
    </el-scrollbar>
  </div>
</template>
<script>
import { firstXzqh, LazyXzqh } from "@/units/api";
import request from "@/units/request";
export default {
  name: "z-tree",
  data() {
    return {
    };
  },
  props: {
    nodeKey: {
      type: String,
      default: "code",
    },
    refName: {
      type: String,
      default: "z-tree",
    },
    checkStrictly: {
      type: Boolean,
      default: false,
    },
    ownUrl: {
      type: String,
      default:
        "https://www.fastmock.site/mock/4a55715bbb8486c8b9a4d0c821b4f9a6/api/first/xzqh",
    },
    nextUrl: {
      type: String,
      default:
        "https://www.fastmock.site/mock/4a55715bbb8486c8b9a4d0c821b4f9a6/api/Lazy/xzqh",
    },
    defaultProps: {
      type: Object,
      default: function () {
        return {
          children: "children",
          label: "name",
        };
      },
    },
    xzcode: {
      type: String,
      default: "230102",
    },
    height: {
      type: String,
      default: "500px",
    },
    width: {
      type: String,
      default: "260px",
    },
    checkbox: {
      type: Boolean,
      default: false,
    },
    value: {
      type: Array,
      default: function () {
        return [];
      },
    },
  },
  methods: {
    loadNode(node, resolve) {
      if (node.level == 0) {
        let _this = this;
        firstXzqh(this.ownUrl, this.xzcode).then((res) => {
          let data = res.data;
          if (data.success) {
            _this.data = data.data.map((x) => {
              x.children = [];
              return x;
            });
            LazyXzqh(this.nextUrl, data.data[0].code).then((res) => {
              let data = res.data;
              if (data.success) {
                data.data.map((v, i) => _this.data[0].children.push(v));
                resolve(_this.data);
              } else {
                _this.data[0].children = [];
                resolve(_this.data);
              }
            });
          } else {
            resolve([]);
          }
        });
      } else {
        LazyXzqh(this.nextUrl, node.data.code).then((res) => {
          let data = res.data;
          if (data.success) {
            resolve(data.data);
          } else {
            resolve([]);
          }
        });
      }
    },
    nodeClick(a, b, c) {
      this.$emit("nodeClick", a, b, c);
    },
    handleCheckChange(a, b, c) {
      this.$emit("input",this.$refs[this.refName].getCheckedKeys());
    },
  },
  mounted() {
    // this.getNowXzqh();
  },
};
</script>

<style lang="scss">
#treeBox {
  .el-scrollbar__wrap{
    overflow-x:hidden;
  }
  float: left;
  border: 1px solid #ccc;
  padding: 10px 3px;
  .el-tree--highlight-current
    .el-tree-node.is-current
    > .el-tree-node__content {
    background-color: #f0f7ff;
    color: #409eff;
    font-weight: bold;
  }
}
</style>
>